<template>
  <div class="flex flex-col h-full">
    <SearchContainer @reset="() => formRef.resetFields()" @search="getCategoryList">
      <a-form ref="formRef" :model="formState">
        <a-form-item name="pyjm" class="w-80">
          <a-input v-model:value="formState.pyjm" placeholder="仪器类型/助记码" allow-clear />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <a-tabs v-model:active-key="activeKey" @change="onChangeTabs">
        <a-tab-pane v-for="categoryItem in categoryList" :key="categoryItem.categoryCode" :tab="categoryItem.categoryName">
          <div class="flex flex-wrap">
            <div
              v-for="item in instrumentData"
              :key="item"
              :class="rowData.id === item.id ? 'bg-blue-50' : ''"
              class="border rounded-md instrument-border mr-10 cursor-pointer mt-2"
              @click="onClickInstrument(item)"
            >
              <div class="mx-12 mt-5 font-bold">{{ item.instrumentTypeName }}</div>
              <a-tooltip>
                <template v-if="item.described && item.status === '1'" #title>{{ item.described }}</template>
                <div class="mx-12 w-[285px] mt-2 h-[70px] line-clamp-3">
                  {{ item.described || '无' }}
                </div>
              </a-tooltip>
              <div class="flex justify-end items-center mt-2">
                <!-- <a-button type="link" size="small" :disabled="item.status === '0'" @click.stop="onClickActive(item, true)">设置</a-button> -->
                <a-button v-authority type="link" size="small" class="mr-2" @click.stop="onClickInstruments(item)">检验仪器</a-button>
                <a-button v-authority type="link" size="small" class="mr-2" @click.stop="onClickProject(item)">检验项目</a-button>
                <a-button type="link" size="small" class="mr-2" @click.stop="onClickInterface(item)">检验接口</a-button>
                <a-button v-if="item.status === '0'" class="mr-2" type="link" size="small" @click.stop="onClickStatus(item, '1')">启用</a-button>
                <a-button v-else type="link" danger size="small" @click.stop="onClickStatus(item, '0')">停用</a-button>
              </div>
            </div>
            <div class="flex items-center h-[160px]">
              <a-button v-authority="'添加'" type="primary" shape="circle" @click="onAdd()">
                <template #icon>
                  <PlusOutlined />
                </template>
              </a-button>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <Instrument v-model:open="instrumentOpen" :row-data="rowData" @success="getInstrumentTypeList" />
    <Interface v-model:open="interfaceOpen" :row-data="rowData" @success="getInstrumentTypeList" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import Instrument from './components/Instrument'
import Interface from './components/Interface'

const router = useRouter()

const activeKey = ref()
const categoryCode = ref()
const interfaceOpen = ref(false)
const formRef = ref(null)
const rowData = ref({})
const formState = ref({})
const categoryList = ref([])
const instrumentOpen = ref(false)
const instrumentData = ref([])

const onClickInstruments = (row) => {
  router.push({
    path: '/workstation-inspect/maintenance/instruments-detail',
    query: {
      id: row?.id,
      commType: row?.commType
    }
  })
}

const onClickProject = (row) => {
  router.push({
    path: '/workstation-inspect/maintenance/instrument-project',
    query: {
      id: row?.id,
      commType: row?.commType
    }
  })
}
const onAdd = () => {
  if (activeKey.value) {
    rowData.value = {
      categoryCode: activeKey.value
    }
  }
  rowData.value.type = 0
  instrumentOpen.value = true
}

const onClickInstrument = (item) => {
  instrumentOpen.value = true
  rowData.value = { ...item, type: 1 }
}
const onClickInterface = (item) => {
  interfaceOpen.value = true
  rowData.value = item
}
const onClickStatus = async (item, status) => {
  const { code, msg } = await post('/lis/InstrumentType/doUpdateInstrumentTypeStatus', {
    id: item.id,
    status
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getInstrumentTypeList()
}

const onChangeTabs = (val) => {
  const item = categoryList.value.find((i) => i.categoryCode === val)
  categoryCode.value = item?.categoryCode
  getInstrumentTypeList()
}

const getCategoryList = async () => {
  const { code, data, msg } = await post('/lis/InstrumentType/getLisCategoryList')
  if (code !== 0) return message.error(msg)
  categoryList.value = data
  categoryList.value.unshift({ categroyName: '全部', categoryCode: '' })
  activeKey.value = data[0]?.categoryCode
  categoryCode.value = data[0]?.categoryCode
  getInstrumentTypeList()
}

const getInstrumentTypeList = async () => {
  const { code, data, msg } = await post('/lis/InstrumentType/getInstrumentTypeList', {
    pageNum: 1,
    pageSize: 999,
    pyjm: formState.value?.pyjm,
    categroyCode: categoryCode.value
  })
  if (code !== 0) return message.error(msg)
  instrumentData.value = data
}

onMounted(() => {
  getCategoryList()
})
</script>

<style lang="less" scoped>
.instrument-border {
  border-color: var(--primary-color);
  &:hover {
    @apply bg-blue-50;
  }
}
</style>
